@import url('~@/styles/mixin.less');

.courseStatistics {
    color: #666;
    font-weight: 400;
    font-size: 30px;
    line-height: 42px;

    &_process:not(:last-child) {
        margin-bottom: 32px;
    }

    &_legend {
        margin-bottom: 32px;
        font-size: 26px;
        .flex(flex-end, center);

        &_plan {
            margin-right: 32px;
            .flex(center, center);
            &::before {
                display: block;
                width: 26px;
                height: 26px;
                margin-right: 8px;
                background-color: #ffeddf;
                border-radius: 6px;
                content: '';
            }
        }

        &_real {
            .flex(center, center);
            &::before {
                display: block;
                width: 26px;
                height: 26px;
                margin-right: 8px;
                background-color: #ff943e;
                border-radius: 6px;
                content: '';
            }
        }
    }

    &_process {
        &_label {
            display: block;
            margin-bottom: 16px;
            .ellipsis();
        }

        &_content {
            .flex(space-between, center);
        }

        &_counter {
            width: 88px;
            text-align: right;
            span {
                display: block;
                .ellipsis();
            }
        }

        &_data {
            flex-shrink: 0;
            width: 542px;
        }

        :global(.adm-progress-bar-trail) {
            overflow: visible;
        }

        :global(.adm-progress-bar-fill) {
            box-shadow: 0 0 12px 0 rgba(255, 162, 74, 0.6);
        }

        :global(.adm-progress-bar) {
            --fill-color: linear-gradient(90deg, #ffbd60 0%, #ff943e 100%);
            --track-color: #ffeee0;
            --track-width: 20px;
        }
    }
}
